<template>
    <div class="main">
        <div style="margin: 10px 0px;">
            <el-button type="danger" :icon="Plus" @click="handlerAdd">添加规格</el-button>
        </div>
        <div class="specifications" v-for="(item,index) in table">
            <div v-if="table.length">
                <div class="specifications-top">
                    <el-input v-model="item.title" placeholder="请输入规格名称" />
                    <span style="color: #92C6FD;" @click="addValue(item)">添加规格值</span>
                </div>
                <div>
                    <el-input v-model="items.values" placeholder="请输入规格值" style="width: 160px;margin-bottom: 20px;"  v-for="(items,index) in item.valueList"/>
                </div>
            </div>
        </div>
        <div>
            <el-button type="danger" :icon="RefreshRight" @click="refresh">刷新</el-button>
            <el-table :data="skuList"  style="width: 100%" border>
                <el-table-column  label="销售价">
                    <el-input  />
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script  setup lang="ts">
import { reactive, ref, nextTick } from "vue";
import { ElMessage, ElInput } from 'element-plus'//element-plus消息提示
import { RefreshRight, Plus, } from '@element-plus/icons-vue'
let table: TypeCate[] = reactive([])
function handlerAdd() {
    if(table.length==3){
        return ElMessage.error("规格最多只能添加三组")
    }
    table.push({ title:'', valueList:[]})
}
function addValue(item:TypeCate) {
    item.valueList.push({values:''})
}
function refresh() {
   console.log(table);
   let skuList = table.map(item=>item.valueList)
   let name = table.map(item=>item.title)
   
   console.log(skuList);
   
}
</script>
<style lang="less" scoped>
.specifications {
    .specifications-top {
        display: flex;

        /deep/ .el-input {
            width: 30%;
            margin-right: 10px;
            margin-bottom: 20px;
        }
    }
}
</style>